<template>
	<div class="index" style="font-size: 0.26rem; padding: 0.3rem; background: #f6f8fb;  ">
    <!-- <div class="flexcc" style="padding-bottom: 0.3rem; font-size: 0.3rem; font-weight: bold;">订单管理</div> -->
    <div class="flexcc" style="width: 6.9rem; font-size: 0.24rem; background: rgb(255,255,255); border-radius: 0.2rem; overflow: hidden;">
      <div class="flexcc" :class="wd == 1 ? 'wd5' : 'wd6'">
        <div>
          <div class="flexbc" style="margin-bottom: 0.2rem;margin-top: 0.2rem;margin-left: 0.2rem;">
            <div style="position: relative">
              <el-input v-model="search.search_info" style="width:6.4rem" placeholder="订单ID/身份证/电话/生产号码/物流单号"></el-input>

              <div style="position: absolute; right: 2px; top: 2px;">
                <el-button type="primary" round @click="searchbtn" style=" width: 1.2rem; height: 37px; padding: 0%;">搜索</el-button>
              </div>
            </div>

            <div class="flexc style_title">
              <div class="flexcc" style="flex: 1;" @click="c1show = true">
                <div style="color: rgb(175, 179, 188); margin-right: 0.1rem;">
                  {{ c1name }}
                </div>
                <div><img src="../../../static/mimg/n15.png" /></div>
              </div>
              <div class="flexcc" style="flex: 1;" @click="c2show = true">
                <div style="color: rgb(175, 179, 188); margin-right: 0.1rem;">
                  {{ c2name }}
                </div>
                <div><img src="../../../static/mimg/n15.png" /></div>
              </div>
              <div class="flexcc" style="flex: 1; overflow: hidden;" @click="c3show = true">
                <div style="color: rgb(175, 179, 188); margin-right: 0.1rem;">
                  {{ c3name }}
                </div>
                <div><img src="../../../static/mimg/n15.png" /></div>
              </div>
              <div class="flexcc" style="flex: 1; overflow: hidden;" @click="c8show = true">
                <div style="color: rgb(175, 179, 188); margin-right: 0.1rem;">
                  {{ c8name }}
                </div>
                <div><img src="../../../static/mimg/n15.png" /></div>
              </div>
              <div>
              </div>
            </div>
          </div>
          <van-calendar v-model="c5show" type="range" :min-date="minDate" @confirm="c5ok" />
          <div style="padding: 0 0.2rem 0.2rem;">
            <div class="flexc ">
              <div class="flexcc"
                style="flex: 1; background: #fff; padding: 0.2rem 0; border-radius: 0.5rem;border: 1px solid rgb(227, 232, 241);"
                @click="c5show = true">
                <div style="color: rgb(175, 179, 188); margin-right: 0.2rem;">
                  {{ c5name }}~{{ c6name }}
                </div>
                <div><img src="../../../static/mimg/n15.png" /></div>
              </div>
              <!-- <div style="margin: 0 0.2rem;">~</div>
              <div class="flexcc"
                style="flex: 1; background: #fff; padding: 0.2rem 0; border-radius: 0.5rem;border: 1px solid rgb(227, 232, 241);"
                @click="c5show = true">
                <div style="color: rgb(175, 179, 188); margin-right: 0.2rem;">
                  {{ c6name }}
                </div>
                <div><img src="../../../static/mimg/n15.png" /></div>
              </div> -->
            </div>
          </div>
        </div>


      </div>
    </div>
    <div class="flexcc" style="width: 6.9rem; font-size: 0.24rem; background: rgb(255,255,255); border-radius: 0.1rem; overflow: hidden;">
      <div style="background: rgb(246, 248, 251);position: relative;width:100%">
        <div style=" margin-bottom: 0.2rem;">
          <div class="t_list_tab_box">
            <div class="t_choose_tab_box">
              <div @click="choosetabbtn(1)" :class="{ t_tab_title_lei: nowtab == 1 }" class="t_tab_title">
                全部订单
                <div class="t_under_line" :class="{ t_under_line_lei: nowtab == 1 }"></div>
              </div>
              <div @click="choosetabbtn(2)" :class="{ t_tab_title_lei: nowtab == 2 }" class="t_tab_title"
                style="margin-left: 20px;margin-right: 20px;">
                证件不合格
                <div class="t_under_line" :class="{ t_under_line_lei: nowtab == 2 }"></div>
              </div>
              <div @click="choosetabbtn(3)" :class="{ t_tab_title_lei: nowtab == 3 }" class="t_tab_title">
                开卡失败
                <div class="t_under_line" :class="{ t_under_line_lei: nowtab == 3 }"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"
      :immediate-check="true">
      <div v-for="item in list" :key="item.id"
        style="background: #fff; padding:0.2rem 0.2rem 0.2rem 0rem; margin-bottom: 0.2rem; border-radius: 0.2rem;width: 100%;">
        <div
          style="background: rgb(237, 247, 255); padding: 0.15rem; border-radius: 0.2rem;margin-left: 0.2rem;"
          class="flexbc">
          <div style="color: rgb(0, 90, 255); font-size: 12px;">
            <span class="t_table_list_con_title">订单ID：</span>
            {{ item.order_no }}
            <i class="el-icon-document-copy" @click="copy(item.order_no)"
              style="margin-left: 10px;cursor: pointer;"></i>
          </div>
          <div style="font-size: 12px;" @click="bianjixiangqing(item)">
            查看详情 >
          </div>
        </div>
        <div>
          <div style=" margin-top: 0.2rem;" class="flexbc">
            <div class="flexc">
              <div style="color: rgb(175, 179, 188); margin-right: 0.2rem;margin-left: 0.2rem; width: 1.3rem; text-align: right;">
                收件人
              </div>
              <div style="font-size: 0.34rem; margin-right: 0.2rem;font-weight:bold">
                {{ item.address_name }}
              </div>
              <div style="font-size: 0.26rem; margin-right: 0.2rem;">
                {{ item.address_mobile }}
              </div>
            </div>
            <div style="font-size: 0.25rem; color: rgb(175, 179, 188);">
              {{ item.status_name }}
            </div>
          </div>
          <div style=" margin-top: 0.2rem;" class="flexbc">
            <div class="flexc">
              <div style="color: rgb(175, 179, 188); margin-right: 0.2rem;margin-left: 0.2rem; width: 1.3rem; text-align: right;">
                生产号码
              </div>
              <div style="font-size: 0.26rem; margin-right: 0.2rem;">
                {{ item.plan_mobile_produce }}
              </div>
            </div>
            <div style="font-size: 0.25rem; color: rgb(175, 179, 188);">
              {{ item.active_name }}
            </div>
          </div>
          <div style=" margin-top: 0.2rem;" class="flexbc">
            <div class="flexc">
              <div style="color: rgb(175, 179, 188); margin-right: 0.2rem;margin-left: 0.2rem; width: 1.3rem; text-align: right;">
                订单来源
              </div>
              <div style="font-size: 0.26rem; margin-right: 0.2rem;" v-if="wd == 1">
                {{ item.source }}
              </div>
              <div style="font-size: 0.26rem; margin-right: 0.2rem;" v-if="wd == 2">
                {{ item.name }}
              </div>
            </div>

          </div>

          <div style=" margin-top: 0.2rem;" class="flexbc">
            <div class="flexc">
              <div style="color: rgb(175, 179, 188); margin-right: 0.2rem;margin-left: 0.2rem; width: 1.3rem; text-align: right;">
                证件号码
              </div>
              <div style="font-size: 0.26rem; margin-right: 0.2rem;">
                {{ item.id_card_num }}
              </div>
            </div>
          </div>

          <div style=" margin-top: 0.2rem;" class="flexbc">
            <div class="flexc">
              <div style="color: rgb(175, 179, 188); margin-right: 0.2rem;margin-left: 0.2rem; width: 1.3rem; text-align: right;">
                商品名称
              </div>
              <div style="font-size: 0.26rem; margin-right: 0.2rem; width: 4rem;">
                {{ item.goods_name }}
              </div>
            </div>
          </div>

          <div style=" margin-top: 0.2rem;" class="flexbc">
            <div class="flexc">
              <div style="color: rgb(175, 179, 188); margin-right: 0.2rem;margin-left: 0.2rem; width: 1.3rem; text-align: right;">
                物流单号
              </div>
              <div style="font-size: 0.26rem; margin-right: 0.2rem;">
                {{ item.tracking_number }}
              </div>
            </div>
          </div>

          <div style=" margin-top: 0.2rem;" class="flexbc">
            <div class="flexc">
              <div style="color: rgb(175, 179, 188); margin-right: 0.2rem;margin-left: 0.2rem; width: 1.3rem; text-align: right;">
                iccid
              </div>
              <div style="font-size: 0.26rem; margin-right: 0.2rem;">
                {{ item.iccid }}
              </div>
            </div>
          </div>

          <div style=" margin-top: 0.2rem;" class="flexbc">
            <div class="flexc">
              <div style="color: rgb(175, 179, 188); margin-right: 0.2rem;margin-left: 0.2rem; width: 1.3rem; text-align: right;">
                收货地址
              </div>
              <div style="font-size: 0.26rem; margin-right: 0.2rem; width: 4rem;">
                <span style="color: rgb(175, 179, 188);"></span>{{
                  `${item.address_province +
                    item.address_city +
                    item.address_district +
                    item.address}`
                }}
              </div>
            </div>
          </div>

          <div style=" margin-top: 0.2rem;" class="flexbc">
            <div class="flexc">
              <div style="color: rgb(175, 179, 188); margin-right: 0.2rem;margin-left: 0.2rem; width: 1.3rem; text-align: right;">
                实收款
              </div>
              <div style="font-size: 0.26rem; margin-right: 0.2rem;">
                <span style="color:#FD5200;font-weight:bold;font-size: 0.26rem; ">￥{{ item.actual_payment}}</span>
              </div>
            </div>
          </div>


        </div>
      </div>
    </van-list>


    <van-popup v-model="c1show" round position="bottom">
      <van-picker
        show-toolbar
        :columns="orderoptions"
        value-key="value"
        @cancel="c1show = false"
        @confirm="c1ok"
      ></van-picker>
    </van-popup>
    <van-popup v-model="c2show" round position="bottom">
      <van-picker
        show-toolbar
        :columns="selleroptions"
        value-key="title"
        @cancel="c2show = false"
        @confirm="c2ok"
      ></van-picker>
    </van-popup>
    <van-popup v-model="c3show" round position="bottom">
      <van-picker
        show-toolbar
        :columns="activeoptions"
        value-key="value"
        @cancel="c3show = false"
        @confirm="c3ok"
      ></van-picker>
    </van-popup>
    <van-popup v-model="c8show" round position="bottom">
      <van-picker
        show-toolbar
        :columns="[
          { key: '1', value: '已支付' },
          { key: '5', value: '退款中' },
          { key: '6', value: '退款成功' },
          { key: '10', value: '无需支付' }
        ]"
        value-key="value"
        @cancel="c8show = false"
        @confirm="c8ok"
      ></van-picker>
    </van-popup>
    <van-popup v-model="c4show" round position="bottom">
      <van-picker
        show-toolbar
        :columns="orderoptions"
        value-key="value"
        @cancel="c4show = false"
        @confirm="c4ok"
      ></van-picker>
    </van-popup>

    <van-popup
      v-model="c7show"
      position="center"
      style="width: 6.5rem; padding: 0.3rem; border-radius: 0.2rem;"
    >
      <div style="padding: 0.6rem 0.3rem; text-align: center; ">
        <div>刷新邀请码</div>
        <div>刷新邀请码后原邀请码将失效</div>
        <div style="margin-top: 20px;text-align: center;">
          <el-button @click="c7show = false">取 消</el-button>
          <el-button type="primary" @click="sousuo">确 定</el-button>
        </div>
      </div>
    </van-popup>
    <footers></footers>
	</div>
</template>

<script>
  import {
    bufahuodiqu
  } from "../../assets/bufahuodiqu.js";
  import footers from '../footer/footers.vue'
	export default {
		name: '客服',
    components: {
      footers
    },
		data() {
			return {
        nowtab: 1,
        list: [],
        total: 0,
        search: {
          page: 1,
          page_size: 20,
          source: "",
          status: "",
          goods_sku: "",
          goods_name: "",
          active_status: "",
          order_no: "",
          decrypt: 1,
          id_card_num: "",
          address_mobile: "",
          plan_mobile_produce: "",
          tracking_number: "",
          start_time: "",
          end_time: "",
          sort: "desc", //排序  asc  升序 desc 降序
          sort_key: "created_at",
          search_info: "",
          pay_status: ""
        },
        isshoweditseller: false,
        goods_name: "",
        goods_sku: "",
        skucheckres: "",
        disablename: false,
        disablesku: false,
        isshoweditimg: false,
        checkimgitem: {},
        activeoptions: [],
        orderoptions: [],
        selleroptions: [],
        isshoweditorder: false,
        // options: regionData,//原地址
        // options: tongyidizhi,//统一地址
        options: bufahuodiqu,
        localcitycode: "",
        changeorderinfo: {
          address_name: "",
          id_card_name: "",
          id_card_num: "",
          address_mobile: "",
          address: "",
          address_province: "",
          address_city: "",
          address_district: "",
          order_id: "",
          is_submit: ""
        },
        province_z: "",
        city_z: "",
        district_z: "",
        card_img_1: "",
        card_img_2: "",
        card_img_3: "",
        checkimgtype: null,
        isshowzdyshq: false,
        spid: "",
        wuliuxiangqingall: "",
        wuliuxiangqinglog: false,

        shoujiban: false,
        loading: false,
        finished: false,

        showdate: false,
        whodata: "",
        minDate: new Date(2023, 0, 1),
        card_num: 0,
        fail_num: 0,
        refund_num: 0,
        selectDate: "",
        pickerOptions: {
          onPick: ({
            maxDate,
            minDate
          }) => {
            this.selectDate = minDate.getTime();
            if (maxDate) {
              this.selectDate = "";
            }
          },
          disabledDate: time => {
            if (this.selectDate !== "") {
              const one = 30 * 24 * 3600 * 1000;
              const minTime = this.selectDate - one;
              const maxTime = this.selectDate + one;
              return time.getTime() < minTime || time.getTime() > maxTime;
            }
          }
        },
        times: [],
        card_num: 0,
        fail_num: 0,

        c1show: false,
        c1name: "订单状态",
        c2show: false,
        c2name: "商品名称",
        c3show: false,
        c3name: "激活状态",
        c4show: false,
        c4name: "订单来源",
        c5show: false,
        c5name: "开始时间",
        c6show: false,
        c6name: "结束时间",
        c7show: false,
        minDate: new Date(2010, 0, 1),
        isshowlian: false,
        c8name: "交易状态",
        c8show: false,
        wd: 1,
        relo: true
			}
		},
		created() {
      //商品列表
      this.getshoplist();
      //激活状态
      this.getactivelist();
      //订单状态
      this.getorderactive();
		},
		mounted() {
      var h = document.documentElement.clientWidth / 7.5 + 'px';
      document.documentElement.style.fontSize = h;
      document.title = '菜鸟驿站'
      // this.getlist();
		},
		methods: {
      bianjixiangqing: function(item) {
        location.href = 'https://njmskj.top/web/dingdanguanli/dingdanchuli/mdingdanchuli?app=1&type=&id='+item.order_id
      },
      //搜索
      searchbtn() {
        this.search.page = 1;
        this.list = [];
        this.loading = false;
        this.finished = false;
        this.onLoad();
      },
      //切换tab
      choosetabbtn(i) {
        this.nowtab = i;
        this.search.page = 1;
        if (i == 1) {
          this.search.status = "";
          this.search.pay_status = "";
        }
        if (i == 2) {
          this.search.status = "-200";
          this.search.pay_status = "";
        }
        if (i == 3) {
          this.search.status = "-460";
          this.search.pay_status = "";
        }
        if (i == 4) {
          this.search.status = "";
          this.search.pay_status = "5";
        }

        if (window.screen.width < 1080) {
          this.list = [];
          this.loading = false;
          this.finished = false;
          this.onLoad();
        } else {
          this.getlist();
        }
      },
      onLoad() {
        this.finished = true;

        let url = "/agent/my/order";
        this.search.type = 0;
        if (this.wd == 2) {
          url = "/agent/reseller/order";
        }

        axios.get(url, {
          params: this.search
        }).then(response => {
          if (response.data.msg.code == 0) {
            if (response.data.data.data.length > 0) {
              response.data.data.data.forEach(item => {
                this.list.push(item);
              });

              if (this.list.length >= response.data.data.total) {
                this.finished = true;
              } else {
                this.search.page++;
                this.loading = false;
                this.finished = false;
              }
            } else {
              this.finished = true;
            }
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
      },
      //列表
      getlist() {
        axios.get("/agent/my/order", {
          params: this.search
        }).then(response => {
          if (response.data.msg.code == 0) {
            this.list = response.data.data.data;
            this.total = response.data.data.total;
            this.card_num = response.data.data.card_num;
            this.fail_num = response.data.data.fail_num;
            this.refund_num = response.data.data.refund_num;
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
      },
      //商品列表
      getshoplist() {
        axios.get("/agent/page/list?is_all=1").then(response => {
          if (response.data.msg.code == 0) {
            this.selleroptions = response.data.data.data;
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
      },
      //激活状态
      getactivelist() {
        axios.get("/api/order/active_status/list").then(response => {
          if (response.data.msg.code == 0) {
            var arr = [];
            for (let index in response.data.data) {
              // console.log(index)//key
              // console.log(obj[index])//value
              arr.push({
                key: index,
                value: response.data.data[index]
              });
            }
            this.activeoptions = arr;
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
      },
      //订单状态
      getorderactive() {
        axios.get("/api/order/status/list").then(response => {
          if (response.data.msg.code == 0) {
            var arr = [];
            for (let index in response.data.data) {
              // console.log(index)//key
              // console.log(obj[index])//value
              arr.push({
                key: index,
                value: response.data.data[index]
              });
            }
            this.orderoptions = arr;
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
      },
      c1ok: function(v, i) {
        console.log(v);
        this.search.status = v.key;
        this.c1name = v.value.slice(0, 4);
        // this.onLoad()
        this.searchbtn();
        this.c1show = false;
      },
      c2ok: function(v, i) {
        this.search.goods_name = v.title;
        this.c2name = v.title.slice(0, 4);
        // this.onLoad()
        this.searchbtn();
        this.c2show = false;
      },
      c3ok: function(v, i) {
        this.search.active_status = v.key;
        this.c3name = v.value.slice(0, 4);
        // this.onLoad()
        this.searchbtn();
        this.c3show = false;
      },
      c8ok: function(v, i) {
        console.log(v);
        console.log(i);
        this.c8name = v.value.slice(0, 4);
        this.search.pay_status = v.key;
        this.searchbtn();
        this.c8show = false;
        // this.search.active_status = v.key

        // this.searchbtn()
      },
      c4ok: function(v, i) {
        this.search.source = v.key;
        this.c4name = v.value.slice(0, 4);
        // this.onLoad()
        this.searchbtn();
        this.c4show = false;
      },
      c5ok: function(v, i) {
        this.search.start_time = moment(v[0]).format("YYYY-MM-DD");
        this.search.end_time = moment(v[1]).format("YYYY-MM-DD");

        this.c5name = moment(v[0]).format("YYYY-MM-DD");
        this.c6name = moment(v[1]).format("YYYY-MM-DD");
        this.searchbtn();
        this.c5show = false;
      },
    }
	}
</script>


<style scoped lang="less">
  /deep/.t_table_list_con .el-button {
    padding-top: 0;
    padding-bottom: 0;
  }

  /deep/.t_table_list_con .el-dropdown {
    margin-top: 0 !important;
  }

  /deep/.t_del_com .el-input__inner {
    border: none !important;
    background-color: white !important;
  }

  .t_list_tab_box {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    align-items: center;
  }

  .t_choose_tab_box {
    display: flex;
    font-size: 0.25rem;
  }

  .t_tab_title {
    color: #020c1d;
    display: flex;
    /* font-size: 16px; */
    flex-direction: column;
    align-items: center;
    cursor: pointer;
  }

  .t_tab_title_lei {
    color: #005aff;
  }

  .t_under_line {
    width: 20px;
    height: 4px;
    border-radius: 4px;
    background-color: #f6f8fb;
    margin-top: 10px;
  }

  .t_under_line_lei {
    background-color: #005aff;
  }

  .t_table_header_box {
    height: 60px;
    background-color: white;
    border-radius: 20px;
    display: flex;
    padding: 0 30px;
    align-items: center;
  }

  .t_table_header_box div {
    font-size: 14px;
    color: #404247;
  }

  .t_table_list_con {
    background-color: white;
    border-radius: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .t_tab_w1 {
    width: 12%;
  }

  .t_tab_w2 {
    width: 13%;
  }

  .t_tab_w3 {
    width: 25%;
  }

  .t_tab_w4 {
    width: 17%;
  }

  .t_tab_w5 {
    width: 11%;
  }

  .t_tab_w6 {
    width: 17%;
  }

  .t_tab_w7 {
    width: 5%;
  }

  .t_table_list_top {
    display: flex;
    box-sizing: border-box;
    border-bottom: 1px solid #e3e8f1;
    padding: 20px 30px;
    font-size: 14px;
    color: #404247;
  }

  .t_table_list_con_con {
    font-size: 14px;
    box-sizing: border-box;
    padding: 20px 30px;
    display: flex;
  }

  .t_table_list_con_title {
    color: #787d85;
  }

  .t_item_info {
    margin-bottom: 20px;
  }

  .el-dropdown-link {
    cursor: pointer;
    color: #409eff;
    font-weight: 500;
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }

  .el-dropdown {
    margin-left: 10px;
    margin-top: 10px;
  }

  /deep/.el-textarea.is-disabled .el-textarea__inner {
    border-radius: 20px;
  }

  .t_change_seller_title {
    margin-bottom: 13px;
    font-size: 16px;
  }

  .t_photo_top {
    display: flex;
    justify-content: space-between;
  }

  .t_img_list_box {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    gap: 20px;
  }

  .t_img_box {
    flex: 1;
    border-radius: 10px;
    overflow: hidden;
    background-color: #f6f8fb;
    position: relative;
    cursor: pointer;
  }

  .t_img_item {
    flex: 1;
    text-align: center;
  }

  .t_img_tips {
    color: #787d85;
    font-size: 16px;
    margin-top: 15px;
  }

  .t_add_img {
    color: #005aff;
    font-size: 34px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -17px;
    margin-top: -17px;
  }

  .t_check_old_img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 10px;
  }
</style>
<style scoped lang="less">
  .gongyingshangshangpin {
    height: 100vh;
    overflow: auto;

    .sxjact {
      background: rgb(0, 90, 255);
      border-radius: 30px;
      font-size: 24px;
      text-align: center;
      font-weight: 500;
      color: rgb(255, 255, 255);
      width: 150px;
      height: 60px;
      margin-right: 30px;
    }

    .sxj {
      background: rgb(227, 232, 241);
      border-radius: 30px;
      font-size: 24px;
      text-align: center;
      font-weight: 500;
      color: rgb(175, 179, 188);
      width: 150px;
      height: 60px;
      margin-right: 30px;
    }

    .xt {
      width: 72px;
      height: 26px;
      margin-right: 10px;
      border-radius: 5px;
      font-size: 12px;
    }

    .lj {
      width: 100px;
      height: 32px;
      color: rgb(64, 66, 71);
      background: rgb(227, 232, 241);
      border-radius: 16px;
      margin-right: 20px;
      font-size: 14px;
      cursor: pointer;
    }

    .ljact {
      width: 100px;
      height: 32px;
      color: rgb(0, 90, 255);
      background: rgb(228, 237, 255);
      border-radius: 16px;
      margin-right: 20px;
      font-size: 14px;
      cursor: pointer;
    }

    .bushi3 {
      margin-right: 20px;
    }

    .wd {
      color: rgb(0, 90, 255);
      position: relative;

      &::after {
        content: "";
        position: absolute;
        left: 50%;
        margin-left: -0.25rem;
        bottom: 0px;
        width: 0.5rem;
        height: 2px;
        background: rgb(0, 90, 255);
      }
    }

    .wd1 {
      border-radius: 0.2rem 0rem 0.2rem 0rem !important;
    }

    .wd2 {
      background: #fff !important;
      top: -0.19rem !important;
      line-height: 1.2rem !important;
      height: 1.2rem !important;
      border-radius: 0.2rem 0.2rem 0 0 !important;
      color: rgb(0, 88, 255) !important;
    }

    .wd3 {
      border-radius: 0rem 0.2rem 0rem 0.19rem !important;
    }

    .wd5 {
      width: 6.9rem;
      margin: 0 0 0.3rem 0;
      background: #fff;
      border-top-right-radius: 10px;
      overflow: hidden;
    }

    .wd6 {
      width: 6.9rem;
      margin: 0 0 0.3rem 0;
      background: #fff;
      border-top-left-radius: 10px;
      overflow: hidden;
    }
  }

  .style_title {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    margin-top: 0.2rem;
  }

  .date_sytle {
    width: 500px;
  }
</style>
